   <template>
  <!-- 商品详情页面 -->
  <div class="disDetails">
    <div id="body">
    <div id="topImg">
      <img :src="getPic(DisDetails.disimage2)" alt class="bigImg" />
      <img :src="getPic(DisDetails.disimage3)" alt />
      <div id="aside">
        <img :src="getPic(DisDetails.disimage2)" alt id="hidden1" @mousemove="hidden1" width="88px" height="52px"/>
        <img :src="getPic(DisDetails.disimage3)" alt id="hidden2" @mousemove="hidden2" width="88px" height="52px" />
      </div>
      <img :src="getPic(DisDetails.disimage1)" alt />
    </div>
    <div>
      {{DisDetails.disEname}}
      {{DisDetails.newprice}},{{DisDetails.discontent}},{{DisDetails.disEname}},{{DisDetails.pastprice}}
      
      加入购物车 ：<img
        :src="imgUrl"
        class="img"
        @click="add"
        width="30px"
        height="30px"
      />
    </div>
    <div id="bottomImg">
      <img :src="getPic(DisDetails.disimage4)" alt />
      <img :src="getPic(DisDetails.disimage5)" alt />
      <img :src="getPic(DisDetails.disimage6)" alt />
      <img :src="getPic(DisDetails.disimage7)" alt />
      <img :src="getPic(DisDetails.disimage8)" alt />
      <img :src="getPic(DisDetails.disimage9)" alt />
      <img :src="getPic(DisDetails.disimage10)" alt />
    </div>
  </div></div>
</template>
<script>
export default {
  // 添加购物车
  data: function() {
    return {
      discountID: "",
      imgUrl: require("../assets/shopping.png"),
      carts: [],
      DisDetails: []
    };
  },
  created() {
    // 接受discountID
    this.discountID = this.$route.query.discountID;
    this.$axios
      .get(
        "http://localhost:3000/discount/discountID?discountID=" +
          this.discountID
      )
      .then(res => {
        console.log("查询结果", res.data.data[0]);

        this.DisDetails = res.data.data[0];
      })
      .catch(err => {
        console.log("错误", err);
      });
  },
  methods: {
    // 顶部图片
    hidden1() {
      document.querySelector("#topImg").childNodes[1].style.display = "none";
      document.querySelector("#topImg").childNodes[0].style.display = "block";
      document.querySelector("#hidden1").style.borderColor = " #ff0";
      document.querySelector("#hidden2").style.borderColor = " #fff";
    },
    hidden2() {
      document.querySelector("#topImg").childNodes[0].style.display = "none";
      document.querySelector("#topImg").childNodes[1].style.display = "block";
      document.querySelector("#hidden2").style.borderColor = " #ff0";
      document.querySelector("#hidden1").style.borderColor = " #fff";
    },

    // 图片路径
    getPic(pic) {
      let path = "http://localhost:3000/upload/" + pic;
      return path;
    },
    add: function() {
      let type = 1;
      let discountID = this.discountID;
      let money = this.DisDetails.newprice
      let tradeID= 0
      console.log('type',type)
      console.log('type',discountID)
      console.log('type',money)
      console.log('type',tradeID)
      this.$axios
        .get("http://localhost:3000/cart/getTypecart", {
          params: {
            type: type,
            discountID: discountID,
            
            tradeID:tradeID
          
          }
        })
        .then(res => {
          console.log(res.data.data)
          if (res.data.data.length > 1 || res.data.data.length == 1) {
            this.cartID = res.data.data[0].cartID;
            this.$axios
              .put(
                "http://localhost:3000/cart/updateCart?cartID=" + this.cartID
              )
              .then(res => {
                console.log("修改成功");
              })
              .catch(err => {
                console.log("错误", err);
              });
          } else if (res.data.data.length == 0) {
            this.$axios
              .post("http://localhost:3000/cart/insertCart", {
                type: 1,
                discountID: discountID,
                tradeID: tradeID,
                userId: 1,
                money:money
              })

              .then(res => {
                console.log("添加成功");
              })
              .catch(err => {
                console.log("错误", err);
              });
          }
        })
        .catch(err => {
          console.log("错误", err);
        });
    }
  }
};
</script>
<style lang="css" scoped>
.bigImg{
  display:none;
}
#aside>img{
  display: inline;
  border: 1px solid #fff;
}
#body{
  width: 1200px;
  margin: 0 auto;
}
</style>